<template>
	<view>
		<view class="distribution">
			<u-row justify="space-between" gutter="10">
				<u-col span="4">
					<view class="ones ayout" @click="release('我要整租')">
						<image src="@/static/index/homeowner/homeowner1.png " style="width: 70rpx;height: 70rpx;"
							mode="widthFix"></image>
						<view class="">我要整租</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="twos ayout" @click="release('我要合租')">
						<image src="@/static/index/homeowner/homeowner2.png " style="width: 70rpx;height: 70rpx;"
							mode="widthFix"></image>
						<view class="">我要合租</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="threes ayout" @click="agreement">
						<image src="@/static/index/homeowner/homeowner3.png " style="width: 70rpx;height: 70rpx;"
							mode="widthFix"></image>
						<view class="">地图找房</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="distribution" style="margin-top: 10px;">
			<view class="follow" style="background-color: #FFEED5;">
				<view style="font-weight: bold;">
					我关注房源
				</view>
				<view style="color: #857F77;font-size: 14px;" @click="clickNav">
					更多关注 >
				</view>
			</view>
			<view class="follow" style="background-color: #ffffff;" v-if="panduan==true">
				<view style="display: flex;width: calc(92vw - 100px);">
					<!-- 	<image :src="substance.faceUrl" mode="widthFix"
						style="width: 16vw;display: flex;align-items: center;"></image> -->
					<view style="display: flex;align-items: center;">
						<u-image :src="substance.houseRoom.faceUrl" mode="widthFix" :lazy-load="true" height=""
							width='16vw'></u-image>
					</view>
					<view
						style="margin-left: 10px; font-family: fangsong;display: flex; line-height: 25px; flex-wrap: wrap;align-items: center;">
						<view style="width: 100%;">
							¥{{substance.houseRoom.price}}
						</view>
						<view class="">
							{{substance.houseRoom.villageName}}{{substance.houseRoom.address}}
						</view>
					</view>
				</view>
				<view class="press">
					<button style="background-color:#FFDA00;"
						@click="contract(substance.houseId,substance.houseRoom.price,substance.houseRoom.payType)">远程签约</button>
					<view style="border: 1px #777777 solid;border-radius: 15px;">
						<button style="background-color: #ffffff;margin: 0;border: none;"
							@click="showings(substance.houseId)">预约看房</button>
					</view>
				</view>
			</view>
			<view class="follow" v-else
				style="background-color: #ffffff;background-color: #ffffff;font-size: 12px;font-family: fangsong;color: #999999; padding: 20px;">
				您还没有关注的房源
			</view>
			<u-modal :show="show" :title="title" showCancelButton="true" @cancel="cancelss" @confirm="start">
				<view class="slot-content">
					<!-- <input type="text" /> -->
					<view style="display: flex;justify-content: space-between;align-items: center;margin: 10px 0;">
						<view style="margin-right: 5px;font-size: 14px;width: 30px;">
							最终价格
						</view>
						<view class="">
							<u-input placeholder="请输入您的最终成交价" border="surround" v-model="selecteds.price"
								inputAlign='right'></u-input>
						</view>
						<view style="width: 26px;">
							/元
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin: 10px 0;">
						<view style="margin-right: 5px;font-size: 14px;width: 60px;">
							支付周期
						</view>
						<view @click="paymentss">
							<u-input placeholder="支付方式(推荐月付)" border="surround" v-model="selecteds.specific"
								disabled='true' disabledColor='#ffffff' inputAlign='right'></u-input>
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin: 10px 0;">
						<view style="margin-right: 5px;font-size: 14px;width: 30px;">
							入住时间
						</view>
						<view class="">
							<u-input placeholder="交房租时间(推荐15号)" border="surround" v-model="selecteds.approximately"
								inputAlign='right'></u-input>
						</view>
						<view style="width: 26px;">
							/号
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin: 10px 0;">
						<view style="margin-right: 5px;font-size: 14px;width: 30px;">
							租期
						</view>
						<view class="">
							<u-input placeholder="租期" border="surround" v-model="selecteds.rentDate"
								inputAlign='right'></u-input>
						</view>
						<view style="width: 26px;">
							月
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin: 10px 0;">
						<view style="margin-right: 5px;font-size: 14px;width: 30px;">
							押金
						</view>
						<view class="">
							<u-input placeholder="押金" border="surround" v-model="selecteds.deposit"
								inputAlign='right'></u-input>
						</view>
						<view style="width: 26px;">
							/元
						</view>
					</view>
				</view>
			</u-modal>
		</view>
		<view class="distribution">
			<u-dropdown ref="uDropdownRef">
				<u-dropdown-item title="小区" :height="300">
					<!-- <view class="slotContent" style="background-color: #FFFFFF;"> -->
					<scroll-view scroll-y="true" style="background-color: #FFFFFF;height: 300rpx;">
						<view v-for="(item,index) in communityvalue" :key="index"
							@click="communityclick(item.villageId)">
							<view class="option">{{item.villageName}}
							</view>
							<u-line color="#666666"></u-line>
						</view>
					</scroll-view>
				</u-dropdown-item>
				<u-dropdown-item title="户型" :height="300">
					<scroll-view scroll-y="true" style="background-color: #FFFFFF;height: 300rpx;">
						<view v-for="(item,index) in housetypeValue" :key="index" @click="housetypeclick(item)">
							<view class="option">{{item}}
							</view>
							<u-line color="#666666"></u-line>
						</view>
					</scroll-view>
				</u-dropdown-item>
				<u-dropdown-item title="租金">
					<scroll-view scroll-y="true" style="background-color: #FFFFFF;height: 300rpx;">
						<view v-for="(item,index) in rental" :key="index" @click="rentalclick(item)">
							<view class="option">{{item.value}}
							</view>
							<u-line color="#666666"></u-line>
						</view>
					</scroll-view>
				</u-dropdown-item>
				<u-dropdown-item title="租期">
					<scroll-view scroll-y="true" style="background-color: #FFFFFF;height: 300rpx;">
						<view v-for="(item,index) in leaseTerm" :key="index" @click="leaseTermclick(item)">
							<view class="option">{{item.value}}
							</view>
							<u-line color="#666666"></u-line>
						</view>
					</scroll-view>
				</u-dropdown-item>
				<u-dropdown-item title="排序">
					<scroll-view scroll-y="true" style="background-color: #FFFFFF;height: 300rpx;">
						<view @click="entire">
							<view class="option">全部
							</view>
							<!-- <u-line color="#666666"></u-line> -->
						</view>
					</scroll-view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
	</view>
</template>

<script>
	// 注下拉还没完成，不过可以根据官网的插槽完成
	import {
		onMounted
	} from 'vue';
	import {
		post,
		get
	} from '@/serve/method.js'
	import {
		test
	} from '@/uni_modules/uview-plus';

	export default {
		data() {
			return {
				// 下拉菜单
				// 小区
				communityvalue: [],
				// 房型
				housetypeValue: ['二室一厅', '三室一厅', '一室一厅', '一室二厅', '一室三厅', '二室二厅', '二室三厅', '三室二厅', '三室三厅', '四室一厅', '四室二厅',
					'四室三厅'
				],
				// 租金
				rental: [{
					'value': "800以下",
					'title': 1
				}, {
					'value': "800-1000",
					'title': 2
				}, {
					'value': "1000-1500",
					'title': 3
				}, {
					'value': "1500-2000",
					'title': 3
				}, {
					'value': "2000-3000",
					'title': 3
				}, {
					'value': "3000以上",
					'title': 4
				}],
				// 租期
				leaseTerm: [{
					'value': "一个月",
					'title': 1
				}, {
					'value': "三个月",
					'title': 3
				}, {
					'value': "六个月",
					'title': 6
				}, {
					'value': "一年",
					'title': 12
				}],
				// 以上为下拉菜单
				substance: '',
				panduan: 'false',
				userId: '',
				// 以下是签合同
				title: '最终成交价',
				show: false,
				selecteds: {
					house: '',
					price: '',
					approximately: '15',
					specific: '',
					rentDate: '',
					deposit: '',
				},
				oness: {
					one: '',
					two: '',
					three: '',
				},
				// 以上是去签约
			}
		},
		mounted() {
			this.community()
		},
		methods: {
			// 获取小区
			community() {
				let urls = '/api/house/selectAllSearch'
				get(urls).then((res) => {
					this.communityvalue = res.data.villageList
					console.log(this.communityvalue, '获取小区')
				})
			},
			communityclick(id) {
				this.$emit('child-event', id);
				this.$refs.uDropdownRef.close();
			},
			// 以上为获取小区
			// 房型
			housetypeclick(item) {
				this.$emit('child-eventone', item);
				this.$refs.uDropdownRef.close();
			},
			// 以上为房型
			// 租金
			rentalclick(item) {
				this.$emit('child-eventtwo', item);
				this.$refs.uDropdownRef.close();
			},
			// 租期
			leaseTermclick(item) {
				this.$emit('child-eventthree', item);
				this.$refs.uDropdownRef.close();
			},
			// 全部
			entire() {
				this.$emit('child-eventfour');
				this.$refs.uDropdownRef.close();
			},
			// 以上为选择
			// 以下是我的关注
			clickNav(url) {
				uni.navigateTo({
					url: '/pages/publishlease/lease?id=我的关注',
				});
			},
			// 以上是我的关注
			follow() {
				let that = this
				uni.getStorage({
					key: 'lifeData',
					success: function(res) {
						console.log('调用成功', 99999998888888888888)
						let url = "/api/system/house/list"
						post(url, {
							status: 1,
							userId: res.data.vuex_user.userId
						}).then(data => {
							that.substance = data.rows[0]
							console.log(data.rows[0], '艰苦斤斤计较斤斤计较急急急')
							if (data.rows[0] == undefined) {
								that.panduan = false
							} else {
								that.panduan = true
							}
						});
					}
				})
			},
			// 以下是合同
			paymentss() {
				let that = this
				uni.showActionSheet({
					itemList: ['周付', '月付', '季付', '年付'],
					success: function(res) {
						console.log(res)
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							that.selecteds.specific = '周付'
						}
						if (res.tapIndex == 1) {
							that.selecteds.specific = '月付'
						}
						if (res.tapIndex == 2) {
							that.selecteds.specific = '季付'
						}
						if (res.tapIndex == 3) {
							that.selecteds.specific = '年付'
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			contract(house, price, payType) {
				let that = this
				uni.getStorage({
					key: 'lifeData',
					success: function(res) {
						that.userId = res.data.vuex_user.userId
						get(`/api/user/getNoSignContract/${that.userId}`).then((resyy) => {
							if (resyy.data.sysUser.authStatus != 2 && resyy.data.sysUser.authStatus !=
								1) {
								uni.showModal({
									title: '提示',
									content: '本平台为诚信共享，便民互助平台，为保障您的权益，以便更好的为您服务，请进行认证！！！',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/mine/authentication'
											});
										}
									}
								});
							} else {
								console.log(price, 888888)
								uni.showModal({
									title: '提示',
									content: '为避免您工作变动和其他未知情况出现导致您无法履约，请选择您与房东拟定好的最短租期，以保障您的押金权益，届时若需续租，平台将为您提供优先提供优先续约及租住权益；租期内若有提前退租的情况，平台将为您提供转租服务，以保障您的权益！！！',
									success: function(res) {
										that.selecteds.house = house
										that.selecteds.price = price
										that.selecteds.specific = payType
										that.selecteds.approximately = 15
										that.oness.one = price
										that.oness.two = payType
										that.oness.three = 15
										that.show = true
										console.log(that.selecteds, 9999)
									}
								});
							}
						}).catch((res) => {
							console.log('失败')
						})
					}
				})

			},
			cancelss() {
				let that = this
				if (that.selecteds.specific == '') {
					console.log(222222222222, that.oness.two)
					that.selecteds.specific = that.oness.two
				}
				if (that.selecteds.approximately == '') {
					that.selecteds.approximately = that.oness.three
				}
				that.show = false
			},
			start() {
				let that = this
				if (test.isEmpty(that.selecteds.rentDate)) {
					return wx.showToast({
						title: '请输入租期（月）',
						icon: 'none',
						duration: 2000
					})
				}
				that.show = false
				let urls = "/api/user/signContract"
				console.log(that.selecteds.rentDate, 9999999)
				post(urls, {
					"userId": that.userId,
					'houseId': that.selecteds.house,
					'payRentOne': that.selecteds.price, //最终价格
					'specific': that.selecteds.specific, //月付，年付
					'approximately': that.selecteds.approximately, //多少号交租
					'rentDate': that.selecteds.rentDate, //租期
					'deposit': that.selecteds.deposit, //押金
				}).then((itemss) => {
					console.log(itemss.data, 88888)
					let fileList = JSON.stringify(itemss.data)
					uni.navigateTo({
						url: '/pages/houseViewing/interlinking?id=' +
							encodeURIComponent(fileList),
					});
				})
			},
			// 以上是合同
			release(name) {
				if (name == '我要整租') {
					uni.navigateTo({
						url: '/pages/search/searchList?id=0'
					});
				}
				if (name == '我要合租') {
					uni.navigateTo({
						url: '/pages/search/searchList?id=1'
					});
				}
			},
			showings(id) {
				this.$emit('identify', id);
			}
		}
	}
</script>

<style scoped lang="scss">
	button::after {
		display: none;
		font-size: 14px;
	}

	.ayout {
		display: flex;
		align-items: center;
		border-radius: 8px;
		font-size: 13px;
		font-weight: bold;
		padding: 2px 0;
	}

	.distribution {
		padding: 0 4vw;

		.option {
			padding: 8px 15px;
			color: #666666;
		}

		.follow {
			display: flex;
			justify-content: space-between;
			// background-color: aqua;
			padding: 10px 10px;
			align-items: center;
			position: relative;

			.press {
				display: flex;
				width: 70px;
				flex-wrap: wrap;
				align-content: space-around;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 10px;

				button {
					border-radius: 20px;
					height: 25px;
					font-size: 12px;
					line-height: 25px;
					margin-top: 3px;
					width: 65px;
				}
			}
		}

		.ones {
			background-color: #F5E8E2;
		}

		.twos {
			background-color: #E6F0F1;
		}

		.threes {
			background-color: #E7EEF6;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 3px;
		background-color: #ffffff;
		padding: 3px;
		position: relative;
	}
</style>